<template>
  <div>
    <el-button type="warning" @click="handleClick">点击我打印</el-button>
    <div ref="print">
      <el-table :data="textData" stripe style="width: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
      </el-table>
    </div>
  </div>
</template>
   
  <script lang="ts" setup>
import { ref } from 'vue'
// @ts-nocheck
// @ts-ignore
import { getLodop } from '/admin/utils/LodopFuncs'

const print = ref()

const textData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

const handleClick = () => {
  const LODOP = getLodop()
  LODOP.PRINT_INIT('')
  // const content = `打印内容文字`;
  //  LODOP.ADD_PRINT_TEXT(50, 50, '60%', 30, content);

  // // LODOP.SET_PRINT_PAGESIZE(1, 2100, 2970, 'A4'); // 纸张方向大小
  LODOP.SET_PREVIEW_WINDOW(0, 0, 0, 800, 800, '') // 演示设置各种样式的打印预览窗口：
  const htmlCode = print.value.innerHTML
  const styleCode =
    '<style>table {margin:0 auto ;text-align: center; border-collapse: separate; border-spacing: 0; } th { border: 1px solid black; padding: 8px; } td { border: 1px solid black; padding: 8px; }</style>'
  // print为要打印的html ID名称：
  LODOP.ADD_PRINT_HTM(0, 0, '100%', '100%', styleCode + htmlCode)
  //   直接打印
  // LODOP.PRINT()
  // 设计模式
  //  LODOP.PRINT_DESIGN()
  LODOP.PREVIEW() // 打印预览
}
</script>